<template>
	<div>
		<p class="filter"></p>
		<div class="addBox"  style="padding-bottom: 100px;">
			<h3 class="fixTitle">
				<span>回复</span>
				<p>
					<em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em><em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div v-loading="formLoading" style="margin-top: 40px;">
				<el-input
          :maxlength="200"
				  type="textarea"
				  :rows="10"
				  placeholder="请输入回复内容（建议字数在200字以内）"
				  v-model="content" style="margin:20px;width: 450px;">
				</el-input>
				<p style="text-align: center;">
					<el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
					<el-button type="info" @click="close">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
  import { createReply, updateReply } from '@/api/courseComment'

  export default {
    created() {
    },
    data() {
      return {
        content: '', // 文本框输入的内容
        btnLoading: false,
        formLoading: false
      }
    },
    props: ['replyData', 'isReply'],
    methods: {
      submitForm() {
        if (!this.content) {
          this.$message.warning('请输入回复内容')
          return false
        }
        this.replyData.content = this.content
        if (this.isReply) {
          this.handleUpdate()
        } else {
          this.handleCreate()
        }
      },
      handleCreate() {
        this.btnLoading = true
        this.formLoading = true
        createReply(0, this.replyData).then(res => {
          this.btnLoading = false
          this.formLoading = false
            this.$message.success('回复成功')
            this.close()
        }).catch(err => {
          this.btnLoading = false
          this.formLoading = false
          console.log(err)
        })
      },
      handleUpdate() {
        this.btnLoading = true
        this.formLoading = true
        updateReply(0, this.replyData).then(res => {
          this.btnLoading = false
          this.formLoading = false
          this.$message.success('更新回复成功')
          this.close()
        }).catch(err => {
          this.btnLoading = false
          this.formLoading = false
          console.log(err)
        })
      },
      close() {
        this.$emit('changeShowReply', this.content)
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3 em{
		padding: 0 5px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		width: 500px;
		padding: 0 10px;
	}
	.addBox {
		width: 500px;
		height: 400px;
		background: #fff;
		position: fixed;
		left: 35%;
		top: 20%;
		z-index: 101;
	}
</style>
